/*******************************************************/
/***************** ## Custom Animation ****************/
/*******************************************************/
/* Animation Delay */
@for $i from 1 through 2
     .delay-#{1 * $i}-0s
        animation-delay: #{$i}s
   
@for $i from 1 through 9
    .delay-0-#{1 * $i}s
        animation-delay: #{0 + .1 * $i}s

@for $i from 1 through 9
    .delay-1-#{1 * $i}s
        animation-delay: #{1 + .1 * $i}s


@keyframes circle_animation
    from
        transform: rotate(0deg)
    to
        transform: rotate(360deg)
        
@keyframes circle_animation_invers
    from
        transform: rotate(360deg)
    to
        transform: rotate(0deg)


@keyframes toggler
  0%,
  10%
    background-position: 0 0, 0 calc(100%/3)
  50%
    background-position: 0 0, calc(100%/3) calc(100%/3)
  90%,
  100%
    background-position: 0 0, calc(100%/3) 0


@keyframes pulse
  to
    box-shadow: 0 0 0 35px rgba(255, 255, 255, 0)

/* Menu Sticky */
@-webkit-keyframes sticky
    0%
        top: -100px
    100%
        top: 0

@keyframes sticky
    0%
        top: -100px
    100%
        top: 0
        
/* Rotated Circle */
@keyframes rotated_circle
    0%
        transform: rotate(0deg)
    100%
        transform: rotate(-360deg)
    
/* Rotated Circle reverse */
@keyframes rotated_circle_reverse
    0%
        transform: rotate(-360deg)
    100%
        transform: rotate(0deg)
             
/* Rotated Man */
@keyframes semi_rotated
    0%,
    100%
        transform: rotate(8deg)
    50%
        transform: rotate(-8deg)
    
/* BG Shape Rotated */
@keyframes semi_rotated_two
    0%,
    100%
        transform: rotate(-30deg)
    50%
        transform: rotate(30deg)
    
@keyframes move_arround
    0%
        top: 20px
        left: 20px
    25%
        top: 20px
        left: -20px
    50%
        top: -20px
        left: -20px
    75%
        top: -20px
        left: 20px
    100%
        top: 20px
        left: 20px
             
/* Hero Circle */
@keyframes upDownLeft
    0%,
    100%
        transform: translate(0px, 0px)
    25%,
    75%
        transform: translate(0px, 50px)
    50%
        transform: translate(-50px, 50px)
    
@keyframes shapeAnimationOne
  0%
    transform: translate(0px, 0px) rotate(0deg)

  25%
    transform: translate(0px, 150px) rotate(90deg)

  50%
    transform: translate(150px, 150px) rotate(180deg)

  75%
    transform: translate(150px, 0px) rotate(270deg)

  100%
    transform: translate(0px, 0px) rotate(360deg)

@keyframes shapeAnimationTwo
  0%
    transform: translate(0px, 0px) rotate(0deg)

  25%
    transform: translate(-150px, -0px) rotate(270deg)

  50%
    transform: translate(-150px, 150px) rotate(180deg)

  75%
    transform: translate(-0px, 150px) rotate(90deg)

  100%
    transform: translate(0px, 0px) rotate(360deg)

@keyframes shapeAnimationThree
  0%
    transform: translate(0px, 0px) rotate(0deg)

  25%
    transform: translate(50px, 150px) rotate(90deg)

  50%
    transform: translate(150px, 150px) rotate(180deg)

  75%
    transform: translate(150px, 50px) rotate(270deg)

  100%
    transform: translate(0px, 0px) rotate(360deg)

@keyframes shapeAnimationFour
  0%
    transform: translate(0px, 0px) rotate(0deg)

  25%
    transform: translate((-150px) -50px) rotate(90deg)

  50%
    transform: translate(-150px, -150px) rotate(180deg)

  75%
    transform: translate(-50px, -150px) rotate(270deg)

  100%
    transform: translate(0px, 0px) rotate(360deg)

@keyframes shapeAnimationFive
  0%
    transform: translate(0px, 0px) rotate(0deg)

  25%
    transform: translate((-100px) -100px) rotate(90deg)

  50%
    transform: translate(100px, 50px) rotate(180deg)

  75%
    transform: translate(-100px, 150px) rotate(270deg)

  100%
    transform: translate(0px, 0px) rotate(360deg)

@keyframes down-up-one
  0%
    transform: rotateX(0deg) translateY(0px)

  50%
    transform: rotateX(0deg) translateY(25px)

  100%
    transform: rotateX(0deg) translateY(0px)

@keyframes down-up-two
  0%
    transform: rotateX(0deg) translate(0px)

  50%
    transform: rotateX(0deg) translate(0, -25px)

  100%
    transform: rotateX(0deg) translate(0px)

@keyframes leftRightOne
    0%,
    100%
        transform: translateX(0)
    50%
        transform: translateX(50px)

@keyframes leftRightTwo
    0%,
    100%
        transform: translateX(0)
    50%
        transform: translateX(-50px)

@keyframes zoomInOut
    0%,
    100%
        transform: scale(1)
    50%
        transform: scale(0.5)
    
/* Preloader */
@keyframes preloader
  from
    -webkit-transform: rotate(0deg)
    transform: rotate(0deg)
    
  to
    -webkit-transform: rotate(360deg)
    transform: rotate(360deg)
    
/* Headline */
@keyframes marquee
    100%
        transform: translate(-100%, 0)
    
@keyframes marquee_right
    from
        transform: translate3d(-100%, 0, 0)
    to
        transform: translate3d(0, 0, 0)

@keyframes marquee_left
    from
        transform: translate3d(0, 0, 0)
    to
        transform: translate3d(-100%, 0, 0)
